<template>
	<view>
		首页
		<button @click="beforindex">跳转到之前写的代码页面</button>
		8,页面跳转 组件-api
		8.1组件方式跳转
		<navigator url="/pages/detail01/detail01" open-type="navigate">01detail</navigator>

		<navigator url="/pages/category/category" open-type="switchTab">
			category
		</navigator>
		8.2api方式跳转
		<button type="default" @click="handleClick1">Detail01 navigate</button>

		<button type="default" @click="handleClick3"> category</button>
		9.页面（通讯）传参
		<!--       方式一：url查询字符串和EventChannel
				 方式二：使用事件总线
				 方式三：全局数据 globalData
				 方式四：本地数据存储
				 方式五：Vuex和Pinia，状态管理库。
				 
				 -->
				 方式一：url查询字符串和EventChannel
				 url
				 <navigator url="/pages/detail01/detail01?name='CGF'&age=18" open-type="navigate">01detail</navigator>
				  EventChannel
				 <button type="default" @click="handleClick1">Detail01 navigate</button>
				  方式二：使用事件总线
				 <button type="default" @click="handleClick4">Detail03 事件总线</button>
				 10,页面生命周期
				 <navigator url="/pages/detail02/detail02">detail02 - 页面生命周期组合式api</navigator>
				 <navigator url="/pages/detail04/detail04">detail04 - 页面生命周期组合式式api</navigator>
				 11,网络请求的封装
				 
				 <navigator url="/pages/detail05/detail05">detail05网络请求的封装1 </navigator>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		// 1，页面的生命周期
		onLoad() {
		uni.$on("acceptData03",(res)=>{
			console.log('从detail03传过来的数据',res);
		})	
		},
		onUnload() {
			uni.$off("acceptData03",(res)=>{
			console.log('从detail03传过来的数据',res);
		})
		},
		// 2，组件的生命周期  可同时存在的。 .vue
		methods: {
			beforindex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			handleClick1() {
				uni.navigateTo({
					url: '/pages/detail01/detail01',
					success(res) {
						res.eventChannel.emit('homepage',{data:'我是home传过来的数据'})
					},
					events:{
						detail01(data){
							console.log('detail01',data);
						}
					}
				})
			},
			handleClick4(){
				uni.navigateTo({
					url:'/pages/detail03/detail03'
				})
			},

			handleClick3() {
				uni.switchTab({
					url: '/pages/category/category'
				})
			},
		}
	}
</script>

<style lang="scss">

</style>
